import React, { useState, useEffect } from 'react';
import '@wangeditor/editor/dist/css/style.css';
import { Editor, Toolbar } from '@wangeditor/editor-for-react';
import { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor';
import { Card, Typography, Button } from 'antd';

const { Title, Paragraph } = Typography;

const WangEditorNextPage: React.FC = () => {
  const [editor, setEditor] = useState<IDomEditor | null>(null);
  const [html, setHtml] = useState('<p>这是 wangEditor Next 版本的初始内容。</p>');

  const toolbarConfig: Partial<IToolbarConfig> = {
    excludeKeys: ['group-video']
  };
  const editorConfig: Partial<IEditorConfig> = {
    placeholder: '请输入内容...',
    MENU_CONF: {
      uploadImage: {
        server: '/api/upload-image',
        fieldName: 'custom-field-name'
      }
    }
  };

  useEffect(() => {
    return () => {
      if (editor == null) return;
      editor.destroy();
      setEditor(null);
    };
  }, [editor]);

  const handleGetContent = () => {
    console.log(html);
  };

  return (
    <div style={{ padding: '24px' }}>
      <Card>
        <Title level={2}>wangEditor Next 富文本编辑器</Title>
        <Paragraph>
          wangEditor Next 是 wangEditor 的下一代版本，提供了更多高级功能和更好的性能。
        </Paragraph>
        
        <div style={{ border: '1px solid #ccc', zIndex: 100, marginTop: '20px' }}>
          <Toolbar
            editor={editor}
            defaultConfig={toolbarConfig}
            mode="default"
            style={{ borderBottom: '1px solid #ccc' }}
          />
          <Editor
            defaultConfig={editorConfig}
            value={html}
            onCreated={setEditor}
            onChange={editor => setHtml(editor.getHtml())}
            mode="default"
            style={{ height: '500px', overflowY: 'hidden' }}
          />
        </div>
        
        <div style={{ marginTop: '20px' }}>
          <Button onClick={handleGetContent}>获取内容</Button>
        </div>
      </Card>
    </div>
  );
};

export default WangEditorNextPage;